<template>
  <div class="auth-wrapper">
    <router-link to="/" class="logo">
      <div class="flex items-center gap-x-2 pl-6 pt-5">
        <img :src="appStore.websiteConfig.logo" alt="" class="w-7 h-7" />
        <span class="text-[#333] text-[24px]">
          {{ appStore.websiteConfig.title }}
        </span>
      </div>
    </router-link>
    <el-form
      ref="signRef"
      size="large"
      :model="formState"
      :rules="rules"
      class="auth-form"
      label-position="top"
      hide-required-asterisk
    >
      <h1 class="auth-form__title">{{ appStore.websiteConfig.title }}</h1>
      <el-form-item
        :error="accountErrorMsg"
        label="账号"
        required
        prop="username"
        class="mt-14 mb-8"
      >
        <el-input
          v-model="formState.username"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item
        :error="passwordErrorMsg"
        label="密码"
        required
        prop="password"
        class="mb-8"
      >
        <basic-password-input
          v-model.trim="formState.password"
          placeholder="请输入密码"
          @keyup.enter="handleSubmit"
        />
      </el-form-item>

      <el-form-item class="relative">
        <el-button
          type="primary"
          class="auth-form__submit"
          :loading="loading"
          @click="handleSubmit"
        >
          登录
        </el-button>
        <el-link
          :underline="false"
          class="font-normal text-sm text-[#868d9d] absolute right-0 -bottom-8"
          type="primary"
          @click="handleForget"
          >忘记密码？</el-link
        >
      </el-form-item>
    </el-form>
    <CommonDealDialog
      v-model:visible="dealDialog.visible"
      content="普通管理员忘记密码，联系管理员重置"
      just-tips
    ></CommonDealDialog>
  </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'

import type { CommonParams } from '@/apis/model/_utils'
import type { CommonDealDialog } from '@/components/application'
import { useAppStore } from '@/stores/modules/app'

import { useSignInErrorMsg } from './useSignInErrorMsg'

const loading = ref(false)
const appStore = useAppStore()
const signRef = ref<FormInstance>()

type IFromData = Required<CommonParams<'/v1/session', 'post'>>

const formState = reactive<IFromData>({
  username: '',
  password: ''
})

const { accountErrorMsg, passwordErrorMsg } = useSignInErrorMsg(formState)

// 校验规则
const rules: Record<keyof IFromData, FormItemRule[]> = {
  username: [
    { required: true, message: '请输入账号' },
    { max: 200, message: '账号长度不能超过200', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    {
      trigger: 'blur',
      validator: passwordValidate
    }
  ]
}

const dealDialog = reactive({
  visible: false
})

/**
 * 处理登录
 */
const handleSubmit = async () => {
  await signRef.value?.validate()
  loading.value = true
  appStore.login(formState).catch(() => {
    loading.value = false
  })
}
/**
 * 忘记密码
 */
const handleForget = () => {
  dealDialog.visible = true
}
</script>

<style scoped lang="scss">
@use './auth.scss';
</style>
